import React, {Component} from 'react'

import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
  ScrollView,
  Dimensions
} from 'react-native'

import Swiper from '../../components/Swiper'
import TwoRowList from '../../components/twoRowList'

const screen = Dimensions.get('window')


import ajax from '../../utils/fetch'
import {setSpText, scaleSize} from "../../utils/SreenUtil";

let page = 1;

import {
  GETTOPGOODCATE,
  GETBANNER,
  URI_GETMODULE,
  URI_INDEXCOLUMNICONCONFIG,
  URI_GETLAYOUTTYPELIST
} from "../../const/shareUri";

export default class Home extends Component {
  static navigationOptions = {
    title: '首页',
  };

  constructor(props) {
    super(props)
    this.state = {
      navList: [],
      bannerList: [],
      tenModule: [],
      indexcolumnIconConfig: [],
      jiujiubaoyoulist: [],
      cnxhList: [],
      refreshing: false,
      page: 1,
      showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
      sw: true//
    }
  }

  componentDidMount() {
    //this._requestData()
    //this.getLayoutTypeList('99by', 20)
    this.requestData()
  }

  //加载数据
  requestData = () => {
    page = 1;
    this.setState({
      refreshing: true,
    });
    this.getLayoutTypeList();
    this.getBanner();
  };

  getBanner = () => {
    ajax.get(GETBANNER, {}, res => {
      //alert(res.data.length);
      this.setState({
        bannerList: res.data
      })
    });
  }

  getLayoutTypeList = () => {
    ajax.get(URI_GETLAYOUTTYPELIST, {
      isIndex: 1,
      key: '99by',
      queryType: '',
      price: '',
      orderByTitle: '',
      orderBy: '',
      page: page,
      reqPageSize: 20
    }, res => {
      this.setState({
        jiujiubaoyoulist: res.data.data,
        refreshing: false
      })
    })
  }
  _loadMore = (pageNumber) => {
    ajax.get(URI_GETLAYOUTTYPELIST, {
      isIndex: 1,
      key: '99by',
      queryType: '',
      price: '',
      orderByTitle: '',
      orderBy: '',
      page: pageNumber,
      reqPageSize: 20
    }, res => {
      // let oldData= this.state.jiujiubaoyoulist;
      let nowData = res.data.data;
      // oldData=oldData.concat(nowData);
      this.setState({
        jiujiubaoyoulist: this.state.jiujiubaoyoulist.concat(nowData)
      });
    })

  }

  //上拉加载数据
  _onEndReached = () => {

    this.setState({
      showFoot: 2
    });
    page += 1;
    this._loadMore(page)
  }


  renderHeader = () => {
    return (
        <View>
          <Swiper biLie={308 / 705} bannerData={this.state.bannerList}/>
          <View style={{
            height: scaleSize(90),
            backgroundColor: '#fff',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: scaleSize(10),
            marginBottom: scaleSize(10),
          }}>
            <Text style={{fontSize: setSpText(30), color: 'red'}}>
              猜你喜欢
            </Text>
          </View>
        </View>
    )
  }

  _renderFooter = () => {
    if (this.state.showFoot === 1) {
      return (
          <View style={{height: 30, alignItems: 'center', justifyContent: 'flex-start',}}>
            <Text style={{color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5,}}>
              没有更多数据了
            </Text>
          </View>
      );
    } else if (this.state.showFoot === 2) {
      return (
          <View style={styles.footer}>
            <ActivityIndicator color='red'/>
            <Text>正在加载更多数据...</Text>
          </View>
      );
    } else if (this.state.showFoot === 0) {
      return (
          <View></View>
          /*<View style={styles.footer}>
            <Text></Text>
          </View>*/
      );
    }
  }


  toDetail = (item) => {
    this.props.navigation.push('GoodsDetails', {item});
  }

  renderList = (data) => {
    return (
        <TwoRowList fun={this.toDetail} item={data.item}/>
    )
  }

  render() {
    return (
        <View style={styles.container}>
          <FlatList
              data={this.state.jiujiubaoyoulist}
              ListHeaderComponent={this.renderHeader}
              numColumns={2}
              columnWrapperStyle={styles.itembox}
              renderItem={this.renderList}
              refreshing={this.state.refreshing}
              onRefresh={this.requestData}
              ListFooterComponent={this._renderFooter.bind(this)}
              onEndReached={this._onEndReached}
              onEndReachedThreshold={1}
          />
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // height:'100%',
    backgroundColor: '#eee',
  },
  itembox: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingLeft: 5,
    paddingRight: 5
  },
  todetails: {
    display: 'flex',
    flexGrow: 0,
    fontSize: 30,
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    backgroundColor: '#fff'
  },
  footer: {
    flexDirection: 'row',
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
})